<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-input type="text" autosize placeholder="请输入订单编号" v-model="fy.orderNo"
					@keyup.enter.native="SearchData" style="width: 300px; margin-left: 20px">
				</el-input>
				<el-input type="text" autosize placeholder="请输入用户ID" v-model="fy.uid" @keyup.enter.native="SearchData"
					style="width: 300px; margin-left: 20px">>
				</el-input>
				<el-select placeholder="请选择提货方式" v-model="fy.deliveryStatus" clearable>
					<el-option label="物流配送" value="0"></el-option>
					<el-option label="到店自提" value="1"></el-option>
				</el-select>
				<el-select placeholder="请选择支付类型" v-model="fy.payType" clearable>
					<el-option v-if="user != 'dajiuSF'" label="认养券" value="5"></el-option>
					<el-option label="消费券" value="6"></el-option>
					<el-option label="鸡蛋" value="2"></el-option>
					<el-option v-if="user != 'dajiuSF'" label="健康分" value="7"></el-option>
				</el-select>
				<el-select placeholder="请选择订单状态" v-model="fy.isNotDo" clearable>
					<el-option label="未处理" :value="1"></el-option>
				</el-select>
				<el-date-picker @change="handleChange" v-model="fy.startTime" type="date" placeholder="选择日期">
				</el-date-picker>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
			</div>
			<el-table :data="OrderList" border :header-cell-style="{ textAlign: 'center' }"
				:row-class-name="tableRowClassName">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="用户名:" style="width: 500px">
								<span>{{ props.row.name }}</span>
							</el-form-item>
							<el-form-item label="用户id:" style="width: 500px">
								<span>{{ props.row.uid }}</span>
							</el-form-item>
							<el-form-item label="所在省，市:" style="width: 500px">
								<span>{{ props.row.provinceCityDistrict }}</span>
							</el-form-item>
							<el-form-item label="详细地址:" style="width: 500px">
								<span>{{ props.row.detail }}</span>
							</el-form-item>
							<el-form-item label="提货方式:" style="width: 500px">
								<span v-if="props.row.deliveryStatus == 0">物流配送</span>
								<span v-else>门店自提</span>
							</el-form-item>
							<!-- 	<el-form-item label="订单来源:">
								<span v-if="props.row.orderSrc == 0">H5</span>
								<span v-if="props.row.orderSrc == 1">小程序</span>
								<span v-if="props.row.orderSrc == 2">APP</span>
							</el-form-item>
							<el-form-item label="支付状态:">
								<span v-if="props.row.payStatus == 0">未支付</span>
								<span v-if="props.row.payStatus == 1">已支付</span>
								<span v-if="props.row.payStatus == 2">退款中</span>
								<span v-if="props.row.payStatus == 3">部分退款</span>
								<span v-if="props.row.payStatus == 4">已退款</span>
								<span v-if="props.row.payStatus == 5">已失效</span>
								<span v-if="props.row.payStatus == 6">待审核</span>
							</el-form-item>
							<el-form-item label="支付类型:">s
								<span v-if="props.row.payType == 1">微信</span>
								<span v-if="props.row.payType == 2">支付宝</span>
								<span v-if="props.row.payType == 3">公对公转账</span>
								<span v-if="props.row.payType == 4">管理积分</span>
							</el-form-item>
							<el-form-item label="订单类型:">
								<span v-if="props.row.orderType == 0">商城订单</span>
								<span v-if="props.row.orderType == 1">兑换订单</span>
								<span v-if="props.row.orderType == 2">礼包订单</span>
							</el-form-item> -->
							<el-form-item label="收货手机号:" style="width: 500px">{{
                props.row.phone
              }}</el-form-item>
							<el-form-item label="订单状态:" style="width: 500px">
								<span v-if="props.row.status == -1">拒收</span>
								<span v-if="props.row.status == 0">待付款</span>
								<span v-if="props.row.status == 1">待发货</span>
								<span v-if="props.row.status == 2">待收货</span>
								<span v-if="props.row.status == 3">待评价</span>
								<span v-if="props.row.status == 4">已完成</span>
								<span v-if="props.row.status == 5">已失效</span>
								<span v-if="props.row.status == 6">待审核</span>
								<span v-if="props.row.status == 7">部分退款</span>
								<span v-if="props.row.status == 8">已退款</span>
							</el-form-item>
							<el-form-item label="拒收原因:" style="width: 500px">
								<span>{{ props.row.rejectOtherReason }}</span>
							</el-form-item>
							<el-form-item label="备注:" style="width: 500px">
								<span>{{ props.row.remark }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column prop="orderNo" label="订单号" />
				<el-table-column prop="serialNumber" label="支付流水号" />
				<el-table-column prop="logisticsOrderNum" label="物流订单号" />
				<el-table-column prop="uid" label="用户ID" />
				<el-table-column prop="userName" label="手机号" />
				<!-- <el-table-column prop="processingFee" label="加工费/克" /> -->
				<!-- <el-table-column prop="deliverMoney" label="运费" /> -->
				<el-table-column prop="totalAmount" label="订单总金额" />
				<el-table-column prop="amount" label="实际支付金额" />
				<el-table-column prop="payType" label="支付类型">
					<template slot-scope="scope">
						<span>{{
              scope.row.payType == 5
                ? "认养券"
                : scope.row.payType == 6
                ? "消费券"
                : scope.row.payType == 2
                ? "鸡蛋"
                : scope.row.payType == 9
                ? "匠心鸡"
                : "健康分"
            }}</span><br />
						<span v-if="scope.row.status == 9">已退回</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" />
				<el-table-column prop="paymentTime" label="支付时间" />
				<!-- <el-table-column prop="updateTime" label="更新时间" /> -->
				<el-table-column prop="remark" label="备注" />
				<el-table-column label="操作" width="210px">
					<template slot-scope="scope">
						<div class="button">
							<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
							<el-button v-if="
                  (scope.row.status == 1 &&
                    scope.row.payType == 2 &&
                    scope.row.crmConsignmentEggs != 1) ||
                  (scope.row.status == 1 && scope.row.payType == 6) ||
                  (scope.row.status == 1 && scope.row.payType == 9)
                " type="warning" size="mini" @click="Fh(scope.row)">发货</el-button>
							<el-button v-if="
                  (scope.row.status == 1 && scope.row.payType == 7) ||
                  scope.row.crmConsignmentEggs == 1
                " type="warning" size="mini" @click="zz(scope.row)">转账</el-button>
							<el-button v-if="scope.row.payStatus == 1 && scope.row.status != 9" type="success"
								size="mini" @click="destory(scope.row)">退回</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="物流订单号" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
				<el-input placeholder="请输入物流订单号" v-model="input" clearable>
				</el-input>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible2 = false">取消</el-button>
					<el-button type="primary" @click="GLYSH(1)">确 定</el-button>
				</span>
			</el-dialog>
			<el-dialog title="物流订单号" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose1">
				<div class="margin"><label>地区：</label>{{ form.localtion }}</div>
				<div class="margin"><label>所属银行：</label>{{ form.subbranch }}</div>
				<div class="margin"><label>开户行：</label>{{ form.bankName }}</div>
				<div class="margin">
					<label>收款人姓名：</label>{{ form.accountRealname }}
				</div>
				<div class="margin">
					<label>收款账号：</label>{{ form.bankAccount }}
				</div>
				<div class="margin">
					<label>收款手机号：</label>{{ form.bankPhone }}
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible3 = false">取消</el-button>
					<el-button type="primary" @click="GLYSH(1)">确 定 转 账</el-button>
				</span>
			</el-dialog>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	import * as OrderApi from "@/api/Search";
	import * as syOrderApi from "@/api/Add";
	import {
		timestampToTime
	} from "@/utils/date";
	export default {
		data() {
			return {
				menuKey: false,
				fy: {
					size: 10,
					current: 1,
				},
				total: 0,
				timestampToTime,
				OrderList: [],
				dialogVisible2: false,
				dialogVisible3: false,
				form: {},
				input: "",
				orderNo: "",
				user: "",
			};
		},
		methods: {
			// 表格隔行变色
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 === 1) {
					return "success-row"; //这是类名
				} else {
					return "";
				}
			},
			dateArrayTransfer(dateArray) {
				if (dateArray == null || dateArray == "") {
					return "无";
				}
				if (dateArray.length == 6) {
					var returnDate =
						dateArray[0] +
						"-" +
						this.returnDoubleNum(dateArray[1]) +
						"-" +
						this.returnDoubleNum(dateArray[2]) +
						" " +
						this.returnDoubleNum(dateArray[3]) +
						":" +
						this.returnDoubleNum(dateArray[4]) +
						":" +
						this.returnDoubleNum(dateArray[5]);
				} else {
					var returnDate =
						dateArray[0] +
						"-" +
						this.returnDoubleNum(dateArray[1]) +
						"-" +
						this.returnDoubleNum(dateArray[2]) +
						" " +
						this.returnDoubleNum(dateArray[3]) +
						":" +
						this.returnDoubleNum(dateArray[4]) +
						":00";
				}
				return returnDate;
			},
			returnDoubleNum(number) {
				return (Array(2).join(0) + number).slice(-2); //创建一个长度为2的数组，且默认用0填充；然后用传过来的数添加都右边，然后从右向左截取两位！
			},
			zz(row) {
				syOrderApi
					.getMemberBank({
						memberId: Number(row.uid),
					})
					.then((res) => {
						if (res.code === 200) {
							this.dialogVisible3 = true;
							this.orderNo = row.orderNo;
							this.form = res.data;
						}
					});
			},
			handleClose1() {
				this.dialogVisible3 = false;
			},
			handleChange() {
				this.SearchData();
			},
			GLYSH() {
				syOrderApi
					.SearchOrderDeliverGoods({
						orderNo: this.orderNo,
						logisticsOrderNum: this.input,
						token: this.$store.getters.token,
					})
					.then((res) => {
						if (res.data == true) {
							this.SearchData();
							this.dialogVisible2 = false;
							this.$notify({
								title: "成功",
								message: "成功",
								type: "success",
							});
							this.dialogVisible3 = false;
							this.input = "";
						} else {
							this.dialogVisible2 = false;
							this.input = "";
							this.$notify({
								title: "失败",
								message: "失败",
								type: "error",
							});
						}
					});
			},
			Fh(row) {
				this.dialogVisible2 = true;
				this.orderNo = row.orderNo;
			},
			destory(row) {
				this.$confirm("确认退回？")
					.then((_) => {
						syOrderApi
							.dingBack({
								orderNo: row.orderNo,
							})
							.then((res) => {
								if (res.data == true) {
									this.dialogVisible = false;
									this.SearchData();
									this.$notify({
										title: "成功",
										message: "退回成功",
										type: "success",
									});
								} else {
									this.dialogVisible = false;
									this.SearchData();
									this.$notify({
										title: "失败",
										message: "退回失败",
										type: "error",
									});
								}
							});
						done();
					})
					.catch((_) => {});
			},
			DelClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syOrderApi
							.DelOrder({
								idList: row.id,
							})
							.then((res) => {
								if (res.data == true) {
									this.SearchData();
									this.$notify({
										title: "成功",
										message: "删除成功",
										type: "success",
									});
								} else {
									this.SearchData();
									this.$notify({
										title: "失败",
										message: "删除失败",
										type: "error",
									});
								}
							});
						done();
					})
					.catch((_) => {});
			},
			handleSizeChange(value) {
				this.fy.size = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.current = value;
				this.SearchData();
			},
			SearchData() {
				let startTime = timestampToTime(this.fy.startTime);
				if (this.fy.deliveryStatus == 0 || this.fy.deliveryStatus == 1) {
					this.fy.payType == 2;
					OrderApi.InsertOrder({
						...this.fy,
						startTime: startTime ? startTime : "",
					}).then((res) => {
						this.total = res.data.total;
						this.OrderList = res.data.records;
					});
				} else {
					OrderApi.InsertOrder({
						...this.fy,
						startTime: startTime ? startTime : "",
					}).then((res) => {
						this.total = res.data.total;
						this.OrderList = res.data.records;
						this.OrderList.map((item) => {
							if (item.payType == 5) {
								item.logisticsOrderNum = "认养订单";
							}
							item.createTime = this.dateArrayTransfer(item.createTime);
							item.paymentTime = this.dateArrayTransfer(item.paymentTime);
							item.updateTime = this.dateArrayTransfer(item.updateTime);
						});
					});
				}
			},
			handleClose() {
				this.dialogVisible2 = false;
				this.input = "";
			},
		},
		created() {
			this.user = localStorage.getItem("user");
			let roleMenuList = sessionStorage.getItem("roleMenuList");
			roleMenuList = JSON.parse(roleMenuList);
			for (let i = 0; i < roleMenuList.length; i++) {
				if (roleMenuList[i].menuKey == "ddglczqz") {
					this.menuKey = true;
				}
			}
			this.SearchData();
		},
	};
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.el-form-item {
		width: 300px;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-input,
	.el-select {
		margin-left: 10px;
	}

	.button {
		display: flex;
	}

	.margin {
		margin-bottom: 20px;
	}

	.success-row {
		background-color: #f6f7fb !important;
	}
</style>
